<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 148px;
        height: 148px;
        display: block;
    }

</style>
<template>
    <div id="">
        <el-upload :action="actionUrl" list-type="picture-card" :file-list="showImgList" :on-success="uploadSuccess" :before-upload="beforeAvatarUpload" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'multiUploaderview',
        data() {
            return {
                showImgList: [],
                uploadList: [],
                dialogImageUrl: '',
                dialogVisible: false,
                actionUrl: 'http://47.93.18.140:7001/admin/upload/upload',
            };
        },
        watch: {
            parentUrlList (val) {
                this.showImgList = [];
                this.uploadList = [];
                for (let v = 0; v < val.length; v++) {
                    this.showImgList.unshift({name: 'photo', url:val[v]});
                }
                for (let i of this.showImgList) {
                    this.uploadList.unshift(i.url);
                }
                console.log(this.uploadList);
            }
        },
        methods: {
            beforeAvatarUpload(file) {
                const isJPG = file.type;
                const isLt2M = file.size / 1024 / 1024 < 2;
                console.log(isJPG);
                if (isJPG != 'image/png' && isJPG != 'image/jpeg') {
                    this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleRemove(file, fileList) {
                let obj = this.uploadList;
                this.uploadList.splice(obj.indexOf(file.url), 1);
                this.emitSuccessUploader(this.uploadList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            emitSuccessUploader (res) {
                let _this = this;
                const callbackArray = []
                for (let v of res) {
                    if (v.url) {
                        callbackArray.push(v.url);
                    } else if (v.response) {
                        callbackArray.push(v.response.data.url);
                    }
                }
                console.log(callbackArray);
                this.$emit('multiuploader-success', res, _this.name);
            },
            uploadSuccess (e) {
                let _this = this;
                _this.uploadList.push(e.src);
                _this.$emit('multiuploader-success', _this.uploadList, _this.name);
            }
        },
        props: {
            parentUrlList: {
                type: Array,
                // default: []
            },
            name: {
                type: String
            },
            setThu: {
                type: Boolean,
                default: false
            }
        }
    };
</script>